<style lang="less" scoped>
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.question_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.ques_content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card_row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.edit_out {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 22px;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
a{
  font-size: 14px;
}
</style>

<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <div style="padding: 15px 0px 30px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div class="question_list">
          <div v-if="apply.length === 0 ">没有申请需要审核～</div>
          <div v-for="(application,index) in apply" class="card_row">
            <Card style="width:900px;margin-bottom: 50px">
              <div class="card">
                <div>申请目标权限：<strong>{{application.target}}</strong></div>
                <div>申请人真实姓名：{{application.user.realName}}</div>
                <div>申请人学校：{{application.user.school}}</div>
                <div>申请人学号：{{application.user.stuNo}}</div>
                <div>申请人用户名：{{application.user.username}}</div>
              </div>
            </Card>

            <div class="edit_out">
              <div @click="ok(index)">
                <a>通过</a>
              </div>
              <div style="margin-top:10px" @click="reject(index)">
                <a style="color: red">拒绝</a>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import { getApply, handleApply } from "../api/api";
export default {
  name: "questions",
  data: function() {
    return {
      breadcrumbList: [{
        name: '首页',
        blod: true,
        to: 'index'
      }, {
        name: '权限审核'
      }],
      apply: []
    };
  },
  mounted() {
    getApply({})
      .then(response => {
        if (response.state === true) {
          this.apply = response.results;
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
  },
  components: {
    myheader: header,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    handle(ok, index) {
      let target = ''
      if(this.apply[index].target === '助教'){
        target = "2"
      } else if (this.apply[index].target === '老师'){
        target = "3"
      }
      
      handleApply({
        ok: ok,
        UUID: this.apply[index].user.UUID,
        userGroup: target,
        _id: this.apply[index]._id
      })
        .then(response => {
          if (response.state === true) {
            this.$Message.success("操作成功");
            this.apply.splice(index, 1);
          } else {
            this.$Message.error("处理失败！ " + response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    },
    ok(index) {
      this.$Modal.confirm({
        title: "确认",
        content: "确认要   通过   这个申请吗？",
        onOk: () => {
          this.handle(1, index);
        }
      });
    },
    reject(index) {
      this.$Modal.confirm({
        title: "确认",
        content: "确认要   拒绝   这个申请吗？",
        onOk: () => {
          this.handle(0, index);
        }
      });
    }
  }
};
</script>